import './App.css';
import { AppBar, Box, IconButton, Menu, MenuItem, Toolbar, Typography } from '@mui/material';
import useLocalStorage from './utils/useLocalStorage';
import { Navigate, Outlet, useNavigate } from 'react-router-dom';
import SideMenu from './components/SideMenu/SideMenu';
import koalaLogo from './assets/imgs/koala_logo_100.png'
import MenuIcon from '@mui/icons-material/Menu';
import AccountCircle from '@mui/icons-material/AccountCircle';

import { useDispatch, useSelector } from 'react-redux';
import { setAppBarMenuState } from './app/features/koalaFilePanelSlice';
import {  useState } from 'react';
function App() {
  const navigate = useNavigate()
  const appBarMenu = useSelector(state => state.koalaFilePanelReducer.menus);

  const [anchorEl, setAnchorEl] = useState(null);
  const [token, setToken] = useLocalStorage('token', '')
  const isAuthenticated = token !== ''
  const dispatch = useDispatch();
  const [menus, setMenus] = useState(false)

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  function handleMenuClick() {
    dispatch(setAppBarMenuState(!appBarMenu)) 
  }

  function handleQuit() {
    localStorage.removeItem('token');
    setMenus(!menus);
    navigate('/signin');
  }

  if (!isAuthenticated) {
    return (<Navigate to={'/signin'} />)
  }


  return (
    <Box className="App">
      <AppBar position="fixed">
        <Toolbar>
          <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="open drawer"
              sx={{display:{xs:'inline-flex', md:'none', lg:'none'}}}
              onClick={handleMenuClick}
            >
              <MenuIcon />
            </IconButton>
          <img alt='koala logo' src={koalaLogo} style={{height:'50px'}}/>
          <Typography sx={{marginLeft:'8px', fontWeight:'800', flexGrow:1}}>Koala Drive</Typography>
          <Box>
            <IconButton size='large' onClick={handleMenu}>
                <AccountCircle fontSize='large'/>
            </IconButton>
            <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={handleQuit}>注销</MenuItem>
              </Menu>
          </Box>
        </Toolbar>
        
      </AppBar>
      <Toolbar />
      <Box sx={{display:'flex', height:'100%'}}>
        <SideMenu/>
        <Outlet/>
      </Box>
    </Box>
  );
}

export default App;
